<template>
  <view>
    <view class="zichan-2">
      <view class="iconfont left" @tap="goBack">&#xe703;</view>
      <view class="right">
        {{account}}
<!--        <view style="font-size: 4vw">鏈接錢包</view>-->
<!--        <img style="width: 4vw;height: 4vw;margin-top: 0.5vh;margin-left: 1vw"  src="../../static/jiaoyi/shouye/6.png" alt="">-->
      </view>
    </view>
    <view class="zichan">
      <view class="zichan-1">
        <view  v-for="(item,index) in msgList"
               @tap="activeIndex = index"
               :class="{ active: index === activeIndex }"
        >
          <div class="zichan-3">
            {{item.title}}
          </div>
        </view>
      </view>

      <scroll-view class="zhchan-content-1" v-show="activeIndex === 0">
        <Recharge :queryRecharge="queryRecharge" @dialogRechargeMsg="dialogRechargeMsg"></Recharge>
      </scroll-view>
      <scroll-view class="zhchan-content-1" v-show="activeIndex === 1">
        <Cash :queryCash="queryCash" @dialogRechargeMsg="dialogRechargeMsg"></Cash>
      </scroll-view>
      <scroll-view class="zhchan-content-1" v-show="activeIndex === 2">
        <Dynamic :queryDynamic="queryDynamic" @dialogRechargeMsg="dialogRechargeMsg"></Dynamic>
      </scroll-view>
      <scroll-view class="zhchan-content-1" v-show="activeIndex === 3">
        <Pledge :queryPledge="queryPledge" @dialogRechargeMsg="dialogRechargeMsg"></Pledge>
      </scroll-view>
      <scroll-view class="zhchan-content-1" v-show="activeIndex === 4">
        <Dividend :queryDividend="queryDividend" @dialogRechargeMsg="dialogRechargeMsg"></Dividend>
      </scroll-view>
      <scroll-view class="zhchan-content-1" v-show="activeIndex === 5">
        <CCAccount :queryCCAccount="queryCCAccount" @dialogRechargeMsg="dialogRechargeMsg"></CCAccount>
      </scroll-view>
    </view>
  </view>

</template>

<script setup>
import { ref } from 'vue'
import {onShow,onLoad} from "@dcloudio/uni-app";
import Recharge from "@/pages/zichan/components/Recharge.vue";
import Cash from "@/pages/zichan/components/Cash.vue"
import Dynamic from "@/pages/zichan/components/Dynamic.vue";
import Pledge from "@/pages/zichan/components/Pledge.vue";
import Dividend from "@/pages/zichan/components/Dividend.vue";
import CCAccount from "@/pages/zichan/components/CCAccount.vue"
import {MyProperty} from "@/api/zichan";

let queryRecharge = ref(0);
let queryCash = ref(0);
let queryDynamic = ref(0);
let queryPledge = ref(0);
let queryDividend = ref(0);
let queryCCAccount = ref(0);

let account = uni.getStorageSync('Account');


// 高亮的下标
let activeIndex = ref(0)
//文档
let msgList = ref([{title: '充值賬户',}, {title: '現金賬户',}, {title: '動態傭金賬户',}, {title: '質押挖礦賬户',}, {title: '分紅賬户',}, {title: 'CC賬户',},])


const goBack = ()=>{
  uni.switchTab({
    url: '/pages/my/my'
  })
}

const MyPropertyList = () =>{
  MyProperty().then(res=>{
    if(res.data.code === 200){
      queryRecharge.value = res.data.data.recharge;
      queryCash.value = res.data.data.cash;
      queryDynamic.value = res.data.data.dynamic;
      queryPledge.value = res.data.data.staking;
      queryDividend.value = res.data.data.bonus;
      queryCCAccount.value = res.data.data.cc;
    }
  })
}

const dialogRechargeMsg = ()=>{
  MyPropertyList();
}



const getLanguages = ()=>{
  const lang = uni.getStorageSync('LANG_KEY')
  if(lang === '中文'){
    msgList.value = [{title: '充值賬户',}, {title: '現金賬戶',}, {title: '動態傭金賬戶',}, {title: '質押挖礦賬户',}, {title: '分紅賬戶',}, {title: 'CC賬户',},]
  }
  if(lang === 'Eng'){
    msgList.value = [{title: 'Recharge',}, {title: 'Cash',}, {title: 'Dynamic',}, {title: 'Pledge',}, {title: 'Dividend',}, {title: 'CC Account',},]
  }
  if (lang === '日本語'){
    msgList.value = [{title: 'チャージアカウント',}, {title: '現金口座',}, {title: '動態傭金賬戶',}, {title: '動的コミッション口座',}, {title: '配当口座',}, {title: 'CCアカウント',},]
  }
  if (lang === '한국어'){
    msgList.value = [{title: '충전계좌',}, {title: '현금계좌',}, {title: '동적커미션',}, {title: '채굴계좌를',}, {title: '배당금계좌.',}, {title: 'CC계정',},]
  }
}

onShow(()=>{
  getLanguages();
})

onLoad(()=>{
  MyPropertyList();
})



</script>

<style scoped>
.zhchan-content-1{
  margin-top: 1vh;
}
.zichan-3{
  width: 130px;
  text-align: center;
  margin: 0 5px;
  height: 30px;
  line-height: 30px;
  font-size: 13px;
}
.zichan{
  background-color: #EBEBEB;
  background-repeat: no-repeat; /* 背景图片是否重复 */
  background-position: center; /* 背景图片的位置 */
  background-size: cover; /* 背景图片的尺寸，cover表示覆盖整个元素，不留空白 */
  width: 100vw; /* 或其他尺寸 */
  height: 100vh; /* 或其他尺寸 */
  padding-top: 2vh;
  box-sizing: border-box;
}
.zichan-1{
  display: flex;
  //justify-content: space-evenly;
  font-size: 3.5vw;
  color: #323232;
  font-weight: bolder;
  overflow-x: auto;
  height: 45px;
  line-height:45px;
}
.active{
  color: #234D93;
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-color: #234D93;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.5vh;
}
.zichan-2{
  display: flex;
  justify-content: space-between; /* 两端对齐 */
  align-items: center;
  height: 13vw;
}
.right{
  //display: flex;
  width: 20vw; /* 或者其他固定宽度 */
  overflow: hidden; /* 隐藏超出的内容 */
  text-overflow: ellipsis; /* 显示省略号 */
  font-size: 4vw;
  color: #CEC4C4;
}
.left{
  width: 10%; /* 或者其他固定宽度 */
  font-size: 4vw;
}
.center{
  flex-grow: 1; /* 占据剩余空间 */
  text-align: center;
  font-size: 5vw;
}
</style>